<template>
  <view class="take">
    <view class="hd">
      <view class="left" v-if="detail.user" @click="goUser(detail.user)">
        <view class="avatar">
          <image :src="setUrl(detail.user.avatar)" class="img"></image>
          <image src="../../static/vip.png" class="vip"></image>
        </view>
        <view class="fo">
          <view class="name">{{ detail.user.nickname }}</view>
          <view class="time">{{ timeFormat(detail.createtime, 'yyyy-mm-dd hh:MM') }}</view>
        </view>
      </view>
      <view class="right">
        <template v-if="detail.is_my != 1">
          <view @click="followUser">
            <view class="setMarrow fish" v-if="detail.is_follow">已关注</view>
            <view class="setMarrow " v-else>关注</view>
          </view>
        </template>
        <!-- <view class="marrow">精华</view> -->
        <view class="more" v-if="order">
          <uv-icon name="more-dot-fill" color="#B8B8B8" size="20"></uv-icon>
        </view>
      </view>
    </view>
    <view class="topic" v-if="detail.talk && detail.talk.length">
      <view class="test" v-for="(item, idx) in detail.talk" :key="idx">#{{ item.name }}</view>
    </view>
    <view class="content" @click="goDetail">
      <uv-read-more ref="readMore" show-height="200rpx" closeText='查看全文' openText='收起' color='#465B89' fontSize='30rpx' textIndent='0' :toggle="false" :shadowStyle="{ backgroundImage: 'none' }">
        <view class="content">
          <uv-parse :content="detail.content"></uv-parse>
        </view>
      </uv-read-more>
    </view>
    <view class="file" v-if="detail.type == 2">
      <view class="icon">
        <image src="../../static/fileImage.png" class="img"></image>
      </view>
      <view class="name">{{ suffixFile(detail.files) }}</view>
    </view>
    <view class="picture" v-if="detail.type == 1 && detail.images">
      <view class="environ" v-for="(item, idx) in detail.images.split(',')" :key="idx">
        <image :src="setUrl(item)" class="img" mode="center"></image>
      </view>
    </view>
    <view class="group" v-if="detail.association">
      <view class="base">
        <view class="icon">
          <image :src="setUrl(detail.association.logo_image)" mode="aspectFill" class="img"></image>
        </view>
        <view class="name">{{ detail.association.name }}</view>
      </view>
    </view>
    <view class="foot">
      <view class="item" @click="setCollect">
        <view class="icon">
          <image src="../../static/tip1.png" class="img" v-if="detail.is_collect == 0"></image>
          <image src="../../static/tip1-1.png" class="img" v-else></image>
        </view>
        <view class="number">{{ detail.collect_num }}</view>
      </view>
      <view class="item">
        <view class="icon">
          <image src="../../static/tip2.png" class="img"></image>
        </view>
        <view class="number">{{ detail.comment_num }}</view>
      </view>
      <view class="item" @click="setLike">
        <view class="icon">
          <image src="../../static/tip3.png" class="img" v-if="detail.is_praise == 0"></image>
          <image src="../../static/tip3-1.png" class="img" v-else></image>
        </view>
        <view class="number">{{ detail.like_num }}</view>
      </view>
      <view class="item">
        <view class="icon">
          <image src="../../static/tip4.png" class="img"></image>
        </view>
        <view class="number">{{ detail.share_num }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { suffixFile, setUrl } from '@/common';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import { post } from '@/api';

const emit = defineEmits(['followClick', 'tagClick'])
  
const props = defineProps({
  detail: {
    type: Object,
    default: () => {}
  },
  order:{
    type: Boolean,
    default: true
  }
})
// 点赞
function setLike(){
  const params = {
    theme_id: props.detail.id,
    way: props.detail.is_praise == 1 ? 2 : 1
  }
  post('api/association_theme/likeTheme', params).then(res => {
    if(res.code == 1){
      if(props.detail.is_praise == 1){
        props.detail.is_praise = 0;
        props.detail.like_num--;
      }else{
        props.detail.is_praise = 1;
        props.detail.like_num++;
      }
    }
  })
}
// 收藏
function setCollect(){
  const params = {
    theme_id: props.detail.id,
    way: props.detail.is_collect == 1 ? 2 : 1
  }
  post('api/association_theme/collectTheme', params).then(res => {
    if(res.code == 1){
      if(props.detail.is_collect == 1){
        props.detail.is_collect = 0;
        props.detail.collect_num--;
      }else{
        props.detail.is_collect = 1;
        props.detail.collect_num++;
      }
    }
  })
}
// 关注
function followUser(){
  const params = {
    follow_user_id: props.detail.user.id,
    way: props.detail.is_follow == 1 ? 2 : 1
  }
  post('api/user_follow/followUser', params).then(res => {
    if(res.code == 1){
      emit('followClick', {type: 'is_follow', userId: props.detail.user.id});
    }
  })
}
function goDetail(){
  uni.navigateTo({
    url: `/pages/group/themeDetail?id=${props.detail.id}`
  });
}
function goUser(row){
  uni.navigateTo({
    url: `/pages/mine/myTheme/index?id=${row.id}`
  });
}
</script>

<style lang="scss" scoped>
  .take{
    padding-top: 40rpx;
    padding-bottom: 30rpx;
    border-top: 1px solid #EFEFEF;
    &:first-child{
      border-top: 0;
    }
    .foot{
      width: 100%;
      display: flex;
      align-items: center;
      .item{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        .number{
          font-weight: 400;
          font-size: 24rpx;
          color: #737373;
          padding-left: 8rpx;
        }
        .icon{
          width: 32rpx;
          height: 32rpx;
        }
      }
    }
    .file{
      width: 100%;
      height: 100rpx;
      background: #F5F5F5;
      border-radius: 8rpx;
      margin-bottom: 36rpx;
      display: flex;
      align-items: center;
      .name{
        font-weight: 400;
        font-size: 28rpx;
        color: #737373;
        padding-left: 20rpx;
      }
      .icon{
        width: 100rpx;
        height: 100rpx;
        background-color: #E55D52;
        display: flex;
        align-items: center;
        justify-content: center;
        .img{
          width: 60rpx;
          height: 60rpx;
        }
      }
    }
    .group{
      padding-bottom: 36rpx;
      display: inline-block;
      .base{
        display: flex;
        align-items: center;
        background-color: #F0F3FA;
        padding: 12rpx;
        border-radius: 8rpx;
        .icon{
          width: 40rpx;
          height: 40rpx;
          border-radius: 6rpx;
          font-size: 0;
          overflow: hidden;
        }
        .name{
          font-weight: 400;
          font-size: 24rpx;
          color: #465B89;
          padding-left: 8rpx;
        }
      }
    }
    .picture{
      width: 100%;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      padding-bottom: 36rpx;
      .environ{
        width: 32%;
        height: 200rpx;
        margin-right: 1%;
        margin-bottom: 1%;
        border-radius: 12rpx;
        overflow: hidden;
      }
      .environ:nth-child(1):nth-last-child(2),
      .environ:nth-child(2):nth-last-child(1),
      .environ:nth-child(1):nth-last-child(3),
      .environ:nth-child(2):nth-last-child(2),
      .environ:nth-child(3):nth-last-child(1) {
          width: 32%;
      }
      
      .environ:nth-child(1):nth-last-child(4),
      .environ:nth-child(2):nth-last-child(3),
      .environ:nth-child(3):nth-last-child(2),
      .environ:nth-child(4):nth-last-child(1) {
          width: 49%;
          height: 300rpx;
      }
    }
    .content{
      font-weight: 400;
      font-size: 30rpx;
      color: #2B2B2B;
      padding-bottom: 24rpx;
      :deep(.uv-read-more__toggle){
        justify-content: flex-start;
        margin-top: 24rpx;
      }
    }
    .topic{
      width: 100%;
      padding-bottom: 8rpx;
      display: flex;
      flex-wrap: wrap;
      .test{
        font-weight: 400;
        font-size: 30rpx;
        color: #465B89;
        margin-right: 20rpx;
      }
    }
    .hd{
      width: 100%;
      padding-bottom: 26rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left{
        display: flex;
        align-items: center;
        .fo{
          padding-left: 20rpx;
          .time{
            font-weight: 400;
            font-size: 22rpx;
            color: #999999;
          }
          .name{
            font-weight: 500;
            font-size: 32rpx;
            color: #2B2B2B;
          }
        }
        .avatar{
          width: 70rpx;
          height: 70rpx;
          position: relative;
          .img{
            border-radius: 50%;
            overflow: hidden;
          }
          .vip{
            position: absolute;
            right: 0;
            bottom: 0;
            width: 28rpx;
            height: 28rpx;
          }
        }
      }
      .right{
        display: flex;
        align-items: center;
        .more{
          margin-left: 30rpx;
        }
        .setMarrow{
          width: 124rpx;
          height: 44rpx;
          background: #FFFFFF;
          border: 1rpx solid #E43222;
          border-radius: 44rpx;
          line-height: 44rpx;
          text-align: center;
          font-weight: 400;
          font-size: 24rpx;
          color: #E43222;
          box-sizing: content-box;
          &.fish{
            color: #999999;
            border-color: #999999;
          }
        }
        .marrow{
          font-weight: 400;
          font-size: 24rpx;
          color: #BF971E;
          width: 96rpx;
          height: 48rpx;
          background: #FFF7DE;
          border-radius: 48rpx;
          line-height: 48rpx;
          text-align: center;
          margin-left: 30rpx;
        }
      }
    }
  }
</style>